<template>
    <span v-if="getFrameType(cellRenderFrame.frameType, cellRenderData) == 'buttons'">
        <template v-for="(button, index) in cellRenderFrame.buttons">
            <el-button
                v-if="isValid(button.functionId, button.visible, cellRenderData)"
                :key="index"
                :icon="button.icon"
                type="text"
                size="small"
                @click.native.prevent="button.click(cellRenderData)"
            >
                {{ button.value }}
            </el-button>
        </template>
    </span>
    <span v-else-if="getFrameType(cellRenderFrame.frameType, cellRenderData) == 'mulitiValue'">
        <template v-for="(item, index) in cellRenderFrame.mulitiValue">
            <CellRender :key="index" :cell-render-frame="item" :cell-render-data="cellRenderData"></CellRender>
            <template v-if="index < cellRenderFrame.mulitiValue.length - 1">
                {{ cellRenderFrame.separate }}
                <br v-if="cellRenderFrame.separate == null" :key="`separate_${index}`" />
            </template>
        </template>
    </span>
    <el-switch
        v-else-if="getFrameType(cellRenderFrame.frameType, cellRenderData) == 'switch'"
        v-model="cellRenderData[cellRenderFrame.key]"
        :active-value="1"
        :inactive-value="0"
        :disabled="!checkFunctionId(cellRenderFrame.functionId)"
        @change="cellRenderFrame.change"
    ></el-switch>
    <el-tag
        v-else-if="getFrameType(cellRenderFrame.frameType, cellRenderData) == 'tag'"
        :type="cellRenderFrame.tag(cellRenderData[cellRenderFrame.key], cellRenderData)"
        :color="
            (cellRenderFrame.color && cellRenderFrame.color(cellRenderData[cellRenderFrame.key], cellRenderData)) || ''
        "
    >
        {{ render(cellRenderFrame.render, cellRenderData[cellRenderFrame.key], cellRenderData) }}
    </el-tag>
    <el-input
        v-else-if="getFrameType(cellRenderFrame.frameType, cellRenderData) == 'input'"
        v-model.trim="cellRenderData[cellRenderFrame.key]"
        type="text"
        :placeholder="cellRenderFrame.placeholder"
        :style="cellRenderFrame.style"
    >
        <el-tooltip
            v-if="cellRenderFrame.tooltip"
            slot="suffix"
            class="item"
            effect="dark"
            :content="cellRenderFrame.tooltip"
            placement="top-start"
        >
            <i class="el-icon-question" style="color: #909399"></i>
        </el-tooltip>
    </el-input>
    <el-select
        v-else-if="getFrameType(cellRenderFrame.frameType, cellRenderData) == 'select'"
        v-model="cellRenderData[cellRenderFrame.key]"
        :placeholder="cellRenderFrame.placeholder ? cellRenderFrame.placeholder : '请选择'"
        :filterable="cellRenderFrame.filterable ? true : false"
        :clearable="cellRenderFrame.clearable"
        @change="(val) => (cellRenderFrame.change ? cellRenderFrame.change(val) : '')"
    >
        <el-option
            v-for="optionItem in selectOptions"
            :key="optionItem.id"
            :label="optionItem.text"
            :value="optionItem.id"
        ></el-option>
    </el-select>
    <el-date-picker
        v-else-if="getFrameType(cellRenderFrame.frameType, cellRenderData) == 'datetimerange'"
        v-model="cellRenderData[cellRenderFrame.key]"
        :style="cellRenderFrame.style"
        type="datetimerange"
        range-separator="至"
        start-placeholder="开始时间"
        end-placeholder="结束时间"
        value-format="yyyy-MM-dd HH:mm:ss"
        :default-time="['00:00:00', '23:59:59']"
        popper-class="datePickStyle"
        @focus="beforeShow"
    ></el-date-picker>
    <el-date-picker
        v-else-if="getFrameType(cellRenderFrame.frameType, cellRenderData) === 'datetime'"
        v-model="cellRenderData[cellRenderFrame.key]"
        :style="cellRenderFrame.style"
        type="datetime"
        placeholder="选择时间"
        value-format="yyyy-MM-dd HH:mm:ss"
        :picker-options="{} || cellRenderFrame.options"
        popper-class="datePickStyle"
        @focus="beforeShow"
    />
    <el-date-picker
        v-else-if="getFrameType(cellRenderFrame.frameType, cellRenderData) == 'date'"
        v-model="cellRenderData[cellRenderFrame.key]"
        type="date"
        placeholder="选择日期"
        value-format="yyyy-MM-dd"
        :picker-options="{} || cellRenderFrame.options"
        popper-class="datePickStyle"
        @focus="beforeShow"
    />
    <div v-else-if="getFrameType(cellRenderFrame.frameType, cellRenderData) == 'ranginput'" class="ranginput">
        <el-input
            v-model.trim="cellRenderData[cellRenderFrame.start]"
            type="input"
            :placeholder="cellRenderFrame.startPlaceholder"
        />
        <div>~</div>
        <el-input
            v-if="cellRenderFrame.type === 'input'"
            v-model.trim="cellRenderData[cellRenderFrame.end]"
            type="input"
            :placeholder="cellRenderFrame.endPlaceholder"
        />
    </div>
    <el-checkbox
        v-else-if="getFrameType(cellRenderFrame.frameType, cellRenderData) == 'checkbox'"
        v-model="cellRenderData[cellRenderFrame.key]"
    ></el-checkbox>
    <el-cascader
        v-else-if="getFrameType(cellRenderFrame.frameType, cellRenderData) === 'dynamicCascader'"
        v-model="cellRenderData[cellRenderFrame.key]"
        :placeholder="cellRenderFrame.placeholder ? cellRenderFrame.placeholder : '请选择'"
        :props="getDynamicCascaderObj(cellRenderFrame.options)"
        :popper-class="cellRenderFrame.popperClass"
    ></el-cascader>
    <el-upload
        v-else-if="getFrameType(cellRenderFrame.frameType, cellRenderData) === 'upload'"
        action="void"
        :accept="cellRenderFrame.accept"
        :auto-upload="false"
        :limit="2"
        :multiple="false"
        :file-list="cellRenderData[cellRenderFrame.key]"
        :on-change="uploadChange"
        :before-remove="uploadBeforeRemove"
    >
        <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
        <el-link type="primary" :underline="false" :href="cellRenderFrame.tplHref">
            {{ cellRenderFrame.tplTitle }}
            <i class="el-icon-download el-icon--right"></i>
        </el-link>
        <div slot="tip" class="el-upload__tip" style="margin-top: 0px; color: blue">{{ cellRenderFrame.tips }}</div>
    </el-upload>
    <span v-else-if="getFrameType(cellRenderFrame.frameType, cellRenderData) === 'slof'">
        <slot :name="cellRenderFrame.slot" :cell-render-data="cellRenderData" :cell-render-frame="cellRenderFrame">
            <CellRenderSolfHelper
                :cell-render-data="cellRenderData"
                :cell-render-frame="cellRenderFrame"
            ></CellRenderSolfHelper>
        </slot>
    </span>
    <span
        v-else
        :style="[cellRenderFrame.style, { display: cellRenderFrame.hide ? 'none' : 'inline' }]"
        :class="cellRenderFrame.class"
        style="font-size: 12px"
    >
        {{ render(cellRenderFrame.render, cellRenderData[cellRenderFrame.key], cellRenderData) }}
    </span>
</template>
<script>
import { checkFunctionId } from '@/utils/permission.js'
import CellRenderSolfHelper from './CellRenderSolfHelper.vue'
export default {
    name: 'CellRender',
    components: {
        CellRenderSolfHelper
    },
    inject: { elform: { default: () => () => {} } },
    props: {
        cellRenderFrame: Object,
        cellRenderData: Object
    },
    data() {
        return {
            selectOptions: []
        }
    },
    created() {
        if (this.cellRenderFrame.frameType == 'select') {
            if (this.cellRenderFrame.options instanceof Promise) {
                this.cellRenderFrame.options.then((cellRenderData) => {
                    this.selectOptions = cellRenderData.data
                })
            } else if (this.cellRenderFrame.options instanceof Array) {
                this.selectOptions = this.cellRenderFrame.options
            }
        }
    },
    methods: {
        isValid(functionId, fun, info) {
            let f = fun || (() => true)
            return this.checkFunctionId(functionId) && f(info)
        },
        render(fun, value, cellRenderData) {
            let f = fun || ((value) => value)
            return f(value, cellRenderData)
        },
        checkFunctionId,
        getFrameType(frameType, cellRenderData) {
            if (typeof frameType == 'function') {
                return frameType(cellRenderData)
            }
            return frameType
        },
        getDynamicCascaderObj(obj) {
            return {
                lazy: true,
                lazyLoad(node, resolve) {
                    const { level } = node
                    obj.searchFun(node.value || '').then((data) => {
                        const nodes = data[obj.infoKey || 'data'].map((item) => ({
                            length: level + 1,
                            value: item[obj.idKey || 'id'],
                            label: item[obj.labelKey || 'text'],
                            leaf: level >= 2
                        }))
                        resolve(nodes)
                    })
                }
            }
        },
        uploadChange(file, fileList) {
            let limit = this.cellRenderFrame.countLimit || 1
            if (fileList.length > limit) {
                let filecount = file instanceof Array ? file.length : 1
                fileList.copyWithin(0, filecount)
                fileList.splice(0 - filecount, filecount)
            }
            this.cellRenderData[this.cellRenderFrame.key] = fileList
            this.$nextTick(function () {
                this.elform().validateField(this.cellRenderFrame.key)
            })
        },
        uploadExceed(file, fileList) {
            this.$message.error('超过最大上传数量')
        },
        uploadBeforeRemove(file, fileList) {
            this.cellRenderData[this.cellRenderFrame.key] = []
        },
        beforeShow(com) {
            this.$nextTick(() => {
                let scale = document.documentElement.clientHeight / 923
                scale = scale > 1 ? 1 : scale
                if (scale < 1) {
                    let rect = com.$el.getBoundingClientRect()
                    let top = parseInt(rect.top + rect.height) + 'px'
                    document.querySelectorAll('.datePickStyle').forEach((ele) => {
                        if (!ele.style.display) {
                            ele.style.transform = `scale(${scale})`
                            setTimeout(() => {
                                ele.style.top = top
                            }, 0)
                        }
                    })
                }
            })
        }
    }
}
</script>
<style lang="scss" scoped>
.el-link {
    margin-left: 10px;
}
.el-icon--right {
    margin-left: 0px !important;
}
</style>
